<template>
  
  <div class="app-container">
    <br>
    <br>
    <el-form :model="query" ref="query" label-width="80px">
        <el-row :gutter=10>
            <el-col :span=14>
            <el-form-item  label="编号" prop="code" >
                <el-input v-model="query.code" placeholder="请输入编号" @change="search" />
            </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span=14>
                <el-form-item  label="姓名" prop="name" >
                    <el-input v-model="query.name" disabled="true"/>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span=18>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="search" >搜索</el-button>
                    <el-button @click="resetForm('query')">重置</el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <div style="width: 90%;padding: 0 3%;">
        <div>
            <h3>整装检查</h3>
                    <el-table
                        :data="tableData"
                        :span-method="arraySpanMethod"
                        border
                        style="width: 100%">
                        <el-table-column
                        align="center"
                            prop="name"
                            label=""
                            width="70">
                        </el-table-column>
                        <el-table-column
                        align="center"
                            prop="amount1"
                            label="24/1-24/11"
                            width="60">
                        </el-table-column>
                        <el-table-column
                        align="center"
                            prop="amount2"
                            label="24/12"
                            width="60">
                        </el-table-column>
                        <el-table-column
                        align="center"
                            prop="amount3"
                            label="25/1-25/10"
                            width="60">
                        </el-table-column>
                        <el-table-column
                        align="center"
                            prop="amount4"
                            label="25/11"
                            width="60">
                        </el-table-column>
                    </el-table>
            
        </div>
        <div>
            <h3>老带新</h3>
            <el-table
                :data="tableData2"
                border
                style="width: 100%">
                <el-table-column
                align="center"
                    prop="name"
                    label=""
                    width="100">
                </el-table-column>
                <el-table-column
                align="center"
                    prop="amount1"
                    label="23年"
                    width="70">
                </el-table-column>
                <el-table-column
                align="center"
                    prop="amount2"
                    label="24年"
                    width="70">
                </el-table-column>
                <el-table-column
                align="center"
                    prop="amount3"
                    label="25年"
                    width="70">
                </el-table-column>
            </el-table>
        </div>
        <div>   
            <h3>复诊情况</h3>
            <el-table
                :data="tableData3"
                border
                style="width: 100%">
                <el-table-column
                align="center"
                    prop="name"
                    label=""
                    width="100">
                </el-table-column>
                <el-table-column
                align="center"
                    prop="amount1"
                    label="23年"
                    width="70">
                </el-table-column>
                <el-table-column
                align="center"
                    prop="amount2"
                    label="24年"
                    width="70">
                </el-table-column>
                <el-table-column
                align="center"
                    prop="amount3"
                    label="25年"
                    width="70">
                </el-table-column>
            </el-table>
        </div>
    </div>
    
  </div>
</template>

<script>
let id = 1000;
import { yearEnd } from '@/api/reports'

export default {
  name: "YearEnd",
  filters: {
    
  },
  data() {
    return {
        query: {},
        tableData: [],
        tableData2: [],
        tableData3: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 3) {
            if (columnIndex === 1) {
                return [1, 2];
            } else if (columnIndex === 2) {
                return [1, 2];
            }
        } else if (rowIndex === 4) {
            if (columnIndex === 1) {
                return [1, 4];
            }
        }
    },
    fetchData() {
        
    },
    search() {
        yearEnd({code: this.query.code}).then(response => {
            this.tableData = response.data.payDetails
            this.tableData2 = [response.data.oldToNew]
            this.tableData3 = response.data.statistics
            this.query.name = response.data.username
        }).catch(e => {
            this.query.name = ''
            this.tableData = []
            this.tableData2 = []
            this.tableData3 = []
        })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  }
}
</script>

<style>

</style>